<template>
  <view>
    <view class="level-box">
      <view class="level-bg"><image :src="vuex_imgPath+'/level-bg.png'" /></view>
      <view class="head-pic"><image :src="vuex_memberInfo.headPicPath || (vuex_imgPath+'/avatar_icon.png')" /></view>
      <view class="name">{{ vuex_memberLevelResp.levelName }}</view>
      <view class="time">到期时间：<text>{{ vuex_memberLevelResp.levelExpireTime.slice(0, 10) }}</text></view>
      <view
        class="more"
        @click="toIntroducePageFn"
      >
        权益介绍
      </view>
      <view class="number"><text>{{ vuex_memberLevelResp.growth }}</text><text class="text">距{{ vuex_memberLevelResp.higherLevelName }}还差<text>{{ vuex_memberLevelResp.higherLevelGapGrowth }}</text>成长值</text></view>
      <view class="progress-box">
        <u-line-progress
          active-color="#fff"
          inactive-color="#fff"
          :percentage="(vuex_memberLevelResp.growth/(vuex_memberLevelResp.higherLevelGapGrowth + vuex_memberLevelResp.growth)*100).toFixed(2)"
          height="4"
        >
          <view class="u-percentage-slot">
            <image src="/myAccount/static/image/progress_icon.png" />
          </view>
        </u-line-progress>
      </view>
      <view
        class="into-info"
        @click="toRecordFn"
      >详情</view>
    </view>
    <view class="privilege-box">
      <view class="title">我的特权</view>
      <view class="privilege-info">
        <u-row class="privilege-row">
          <template v-for="(item, index) in privilegeList">
            <u-col v-if="index < 4" :key="index" span="3">
              <!--              <image :src="item.iconUrl" />-->
              <image :src="item.flag ? item.iconUrl : '/myAccount/static/image/free_freight_icon.png'" />
              <text>{{ item.title }}</text>
              <text class="hint" :style="item.digest.length > 7 ? 'font-size: 16rpx;' : ''">{{ item.digest }}</text>
            </u-col>
          </template>
        </u-row>
        <u-row class="privilege-row">
          <template v-for="(item, index) in privilegeList">
            <u-col v-if="index >= 4" :key="index" span="3">
              <!--              <image :src="item.iconUrl" />-->
              <image :src="item.flag ? item.iconUrl : '/myAccount/static/image/free_freight_icon.png'" />
              <text>{{ item.title }}</text>
              <text class="hint" :style="item.digest.length > 8 ? 'font-size: 18rpx;' : ''">{{ item.digest }}</text>
            </u-col>
          </template>
        </u-row>
      </view>
    </view>
    <view class="task-box" :style="'padding-bottom: ' + paddingBottom + 'px'">
      <view class="title">会员任务</view>
      <view v-for="(item, index) in taskList" :key="index" class="task-list">
        <image :src="taskOptions[item.sign].icon" />
        <view class="name">{{ item.taskName }}</view>
        <view class="number"><view class="lable">成长值</view>+{{ item.taskValue }}</view>
        <view
          v-if="item.taskType == 2"
          class="hint"
        >
          剩余次数：{{ item.taskUnfinishNum }}
        </view>
        <view
          v-if="item.taskState == 1"
          class="into complete"
        >
          已完成
        </view>
        <view
          v-if="item.taskState == 2"
          class="into"
          @click="toFinishTaskFn(taskOptions[item.sign])"
        >
          去完成
        </view>
      </view>
      <!--      <view class="task-list">
        <image src="/myAccount/static/image/task-01.png" />
        <view class="name">注册奖励</view>
        <view class="number"><view class="lable">成长值</view>+100</view>
        <view class="into complete">已完成</view>
      </view>
      <view class="task-list">
        <image src="/myAccount/static/image/task-02.png" />
        <view class="name">首次设置头像</view>
        <view class="number"><view class="lable">成长值</view>+100</view>
        <view class="into">去完成</view>
      </view>
      <view class="task-list">
        <image src="/myAccount/static/image/task-03.png" />
        <view class="name">完善个人信息</view>
        <view class="number"><view class="lable">成长值</view>+100</view>
        <view class="into">去完成</view>
      </view>
      <view class="task-list">
        <image src="/myAccount/static/image/task-04.png" />
        <view class="name">首次分享商品(仅APP)</view>
        <view class="number"><view class="lable">成长值</view>+100</view>
        <view class="into">去完成</view>
      </view>
      <view class="task-list">
        <image src="/myAccount/static/image/task-05.png" />
        <view class="name">首次收藏商品(仅PC)</view>
        <view class="number"><view class="lable">成长值</view>+100</view>
        <view class="into">去完成</view>
      </view>
      <view class="task-list">
        <image src="/myAccount/static/image/task-06.png" />
        <view class="name">首次下单成功</view>
        <view class="number"><view class="lable">成长值</view>+100</view>
        <view class="into">去完成</view>
      </view>
      <view class="task-list">
        <image src="/myAccount/static/image/task-07.png" />
        <view class="name">认证审核通过</view>
        <view class="number"><view class="lable">成长值</view>+100</view>
        <view class="into">去完成</view>
      </view>
      <view class="task-list">
        <image src="/myAccount/static/image/task-08.png" />
        <view class="name">每日登录</view>
        <view class="number"><view class="lable">成长值</view>+100</view>
        <view class="hint">剩余次数：0</view>
        <view class="into">去完成</view>
      </view>
      <view class="task-list">
        <image src="/myAccount/static/image/task-09.png" />
        <view class="name">每日购物</view>
        <view class="number"><view class="lable">成长值</view>+100</view>
        <view class="hint">剩余次数：0</view>
        <view class="into">去完成</view>
      </view>
      <view class="task-list">
        <image src="/myAccount/static/image/task-10.png" />
        <view class="name">每日分享商品</view>
        <view class="number"><view class="lable">成长值</view>+100</view>
        <view class="hint">剩余次数：0</view>
        <view class="into complete">已完成</view>
      </view>-->
    </view>
  </view>
</template>

<script>
import {
  appPrivilegeList,
  taskCenter,
} from '@/api/yc_userInfo'
import {
  getLoginInfoFn
} from '@/common/common'
const myAccountPage = '/myAccount/personalData/index'
const auditSuccessPage = '/ycPayments/enterpriseCertification/index'
const homePage = '/shopIndex/shopIndex'
const taskOptions = {
  'REGISTER': {
    icon: '/myAccount/static/image/task-01.png',
  }, //注册奖励
  'SET_HEAD_PIC': {
    icon: '/myAccount/static/image/task-02.png',
    linkUrl: myAccountPage,
  }, //首次设置头像
  'SET_PERSON_INFO': {
    icon: '/myAccount/static/image/task-03.png',
    linkUrl: myAccountPage,
  }, //完善个人信息
  'AUDIT_SUCCESS': {
    icon: '/myAccount/static/image/task-07.png',
    linkUrl: auditSuccessPage,
  }, //认证审核通过
  'COLLECT_PRODUCT': {
    icon: '/myAccount/static/image/task-05.png',
    linkUrl: homePage,
  }, //首次收藏商品(仅PC)
  'FIRST_PAYMENT_SUCCESS': {
    icon: '/myAccount/static/image/task-06.png',
    linkUrl: homePage,
  }, //首次下单成功
  'DAYS_LOGIN': {
    icon: '/myAccount/static/image/task-08.png',
    linkUrl: homePage,
  }, //每日登录
  'PAYMENT_SUCCESS': {
    icon: '/myAccount/static/image/task-09.png',
    linkUrl: homePage,
  }, //每日购物
  'SHARE_PRODUCT': {
    icon: '/myAccount/static/image/task-04.png',
    linkUrl: homePage,
  }, //首次分享商品(仅APP)
  'FIRST_SHARE_PRODUCT': {
    icon: '/myAccount/static/image/task-10.png',
    linkUrl: homePage,
  }, //每日分享商品
}
export default {
  name: 'Index',
  data() {
    return {
      taskOptions,
      privilegeList: [], // 特权列表
      taskList: [], // 任务列表
      paddingBottom: 0, // 底部距离
    }
  },
  onLoad() {
    this.setPaddingBottomFn()
    this.getMemberInfoFn()
    this.appPrivilegeListFn()
    this.taskCenterFn()
  },
  methods: {
    // 设置底部安全距离
    setPaddingBottomFn() {
      // #ifdef MP-WEIXIN
      this.paddingBottom = this.vuex_systemInfo[1].safeAreaInsets.bottom
      // #endif
      // #ifdef MP-ALIPAY
      if (this.vuex_systemInfo && this.vuex_systemInfo.length > 0 && this.vuex_systemInfo[1].safeAreaInsets) {
        const bottom = this.vuex_systemInfo[1].safeAreaInsets.bottom > 50 ? this.vuex_systemInfo[1].safeArea.bottom : this.vuex_systemInfo[1].safeAreaInsets.bottom
        this.paddingBottom = bottom
      }
      // #endif
    },
    /*获取会员信息 vuex_memberLevelResp*/
    getMemberInfoFn() {
      getLoginInfoFn(this.vuex_memberInfo.memberId)
    },
    /*获取会员特权列表*/
    async appPrivilegeListFn() {
      const params = {
        memberId: this.vuex_memberInfo.memberId
      }
      const res = await appPrivilegeList()
      console.log(res);
      if (res.code != 0) {
        this.$u.toast(res.msg)
        return
      }
      this.privilegeList = res.data
    },
    /*获取任务列表*/
    async taskCenterFn() {
      const params = {
        memberId: this.vuex_memberInfo.memberId
      }
      const res = await taskCenter()
      console.log(res);
      if (res.code != 0) {
        this.$u.toast(res.msg)
        return
      }
      this.taskList = res.data.memberTaskInfoList
    },
    /*完成任务跳转*/
    toFinishTaskFn(taskInfo) {
      const linkUrl = taskInfo.linkUrl
      uni.navigateTo({ url: linkUrl })
    },
    /*成长值记录*/
    toRecordFn() {
      uni.navigateTo({ url: '/myAccount/membershipInterests/growthValueRecords' })
    },
    /*权益介绍*/
    toIntroducePageFn() {
      uni.navigateTo({ url: '/myAccount/membershipInterests/introducePage' })
    },
  }
}
</script>

<style scoped lang="scss">
.level-box{
  width:686rpx;
  height: 224rpx;
  position: relative;
  margin:48rpx auto 0;
  color: $uni-text-color-inverse;
  font-size: $uni-font-size-sm;
  .level-bg{
    width: 686rpx;
    height: 224rpx;
    position: absolute;
    top:0;
    left: 0;
    image{
      width: 100%;
      height: 100%;
    }
  }
  .head-pic{
    width: 120rpx;
    height: 120rpx;
    position: absolute;
    top:16rpx;
    left: 24rpx;
    border-radius: 120rpx;
    overflow: hidden;
    image{
      width: 100%;
      height: 100%;
    }
  }
  .name{
    padding:34rpx 0 0 168rpx;
    font-size:$uni-font-size-lg;
    font-weight: bold;
    position: relative;
  }
  .time{
    padding: 6rpx 0 0 168rpx;
    position: relative;
  }
  .more{
    position: absolute;
    right: 24rpx;
    top:34rpx;
    padding: 0 24rpx 0 0;
    font-size: $uni-font-size-base;
  }
  .number{
    padding:42rpx 0 0 32rpx;
    .text{
      padding-left: 24rpx;
      font-size: 20rpx;
      position: relative;
    }
  }
  .progress-box{
    width: 480rpx;
    margin: 4rpx 0 0 32rpx;
    .u-percentage-slot {
      padding: 1px 0;
      image {
        width: 16rpx;
        height: 16rpx;
      }
    }

  }
  .into-info{
    padding: 0 16rpx;
    border-radius: 8rpx;
    height: 40rpx;
    line-height: 40rpx;
    border: 2rpx solid #fff;
    overflow: hidden;
    position: absolute;
    bottom:12rpx;
    right: 24rpx;
  }
}
.privilege-box{
  margin: 16rpx 32rpx 0;
  background: #fff;
  border-radius: 8rpx;
  padding-bottom: 24rpx;
  .title{
    font-size: $uni-font-size-base;
    font-weight: bold;
    padding: 24rpx 0 0 24rpx;
  }
  .privilege-info{
    /deep/ .u-row{
      margin-top: 24rpx;
    }
    image{
      width: 88rpx;
      height: 88rpx;
      display: block;
      margin: 0 auto 8rpx;
    }
    text{
      display: block;
      text-align: center;
    }
    .hint{
      color: $uni-text-color-tips;
      font-size: 20rpx;
      margin-top: 4rpx;
    }
  }
}
.task-box{
  margin:16rpx 32rpx 0;
  background: #fff;
  border-radius: 8rpx;
  .title{
    font-size: $uni-font-size-base;
    font-weight: bold;
    padding: 24rpx 0 0 24rpx;
  }
  .task-list{
    margin: 0 24rpx;
    height: 128rpx;
    padding: 0 0 0 72rpx;
    position: relative;
    image{
      width: 64rpx;
      height: 64rpx;
      top: 32rpx;
      position: absolute;
      left: 0;
    }
    .name{
      font-size: $uni-font-size-base;
      padding-top: 24rpx;
    }
    .number{
      display: inline-block;
      border-radius: 8rpx 20rpx 20rpx 8rpx;
      border: 1rpx solid rgba(255,85,51,1);
      white-space: nowrap;
      color:$uni-orange;
      font-size: 20rpx;
      padding-right: 8rpx;
      margin-top: 8rpx;
      float: left;
      .lable{
        border-radius: 8rpx 20rpx 20rpx 8rpx;
        background: #FF947E;
        display: inline-block;
        color: $uni-text-color-inverse;
        padding: 0 8rpx;
        margin-right: 8rpx;
      }
    }
    .hint{
      display: inline-block;
      font-size: $uni-font-size-sm;
      color: $uni-text-color-tips;
      float: left;
      margin:6rpx 0 0 16rpx;
    }
    .into{
      position: absolute;
      height: 56rpx;
      line-height: 56rpx;
      top:36rpx;
      right: 24rpx;
      font-size: $uni-font-size-base;
      background: $uni-orange;
      color: $uni-text-color-inverse;
      border-radius: 8rpx;
      padding: 0 16rpx;
    }
    .complete{
       color: $uni-grey-aaa;
      background: none;
    }
  }
}
::v-deep .u-line-progress__background {
  opacity: 0.4;
}
</style>
